<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    canvas {
        border: 1px black solid;
    }
</style>
<script src="js/tool.js"></script>
<script src="js/Game.js"></script>
<script src="js/scene/Paddle.js"></script>
<script src="js/scene/Ball.js"></script>
<script src="js/scene/Block.js"></script>
<script src="js/scene/Scene.js"></script>
<script src="js/scene/EditorScene.js"></script>

<body>
    <canvas id='id-canvas-draw' width="480" height="600"></canvas>
    <div id='id-div-start'>开始</div>
    <div id='id-div-edit'>编辑</div>
    <script>
        selectMode = function (model, game) {
            let m
            switch (model) {
                case 'start':
                    m = new Scene(game)
                    break
                case 'edit':
                    m = new EditorScene(game)
                    break
            }
            return m
        }

        showLevel = function (scene) {
            let select = e('#id-div-level')
            if(select){
                select.remove()
            }
            let text = localStorage.levels || "[]"
            let data = JSON.parse(text)
            let str = ''
            for (let index = 0; index < data.length; index++) {
                let element = index + 1
                str += `<li data-n = ${element}>${element}<button>删除</button></li>`
            }
            str = `<div id = 'id-div-level'>${str}</div>`
            let dom = e('body')
            appendHtml(dom, str)

            select = e('#id-div-level')
            select.addEventListener('click', event => {
                if (event.target.localName == 'button') {
                    let n = event.target.parentNode.dataset.n
                    let text = localStorage.levels
                    let data = JSON.parse(text)
                    data.splice(n - 1, 1)
                    let str = JSON.stringify(data)
                    localStorage.levels = str
                    showLevel(scene)
                } else if (event.target.localName == 'li') {
                    let n = event.target.dataset.n
                    scene.loadBlock(n - 1)
                    showLevel(scene)
                }
            })
        }



        var main = function () {
            // 图片资源路径
            let images = {
                block: {
                    '1': 'img/block_yellow.png',
                    '2': 'img/block_red.png',
                    '3': 'img/block_blue.png',
                },
                paddle: 'img/paddle.png',
                ball: 'img/ball.png',
            }


            var game = new Game(images)

            var scene = new Scene(game)
            showLevel(scene)

            scene.loadBlock()

            document.querySelector('#id-div-start').addEventListener('click', () => {
                scene = selectMode('start', game)
            })
            document.querySelector('#id-div-edit').addEventListener('click', () => {
                scene = selectMode('edit', game)
            })



            game.update = function () {
                scene.update()
            }

            // 重写画图函数
            game.draw = function () {
                scene.draw()
            }
        }
        main()
    </script>
</body>

</html>